<template>
  <div class="clock-page">
    <Navbar :bg="navBg" :title="navTitle">
      <template #action>
        <div class="action" @click="onSendClick">发送</div>
      </template>
    </Navbar>
    <div class="content">
      <div class="colck-header">
        <div v-for="item in colckItems" :key="item">{{ item }}</div>
      </div>
      <div class="colck-body">
        <div class="year">
          <van-date-picker
            :show-toolbar="false"
            v-model="currentDate"
            :min-date="minDate"
            :max-date="maxDate"
            @change="handleDateChange"
          />
        </div>
        <div class="week">
          <van-picker v-model="currentWeek" :show-toolbar="false" :columns="columns" @change="onWeekChange" />
        </div>
        <div class="time">
          <van-time-picker :show-toolbar="false" v-model="currentTime" @change="handleTimeChange" />
        </div>
      </div>
    </div>
    <div class="btn" @click="handleNowTime">自动校准</div>
  </div>
  <van-dialog v-model:show="infoShow" :show-confirm-button="false">
    <InfoDialog @emitConfirm="emitConfirm" />
  </van-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { colckItems, weekItems } from '@/utils/enum.ts'
import InfoDialog from '@/components/SettingsComp/InfoDialog.vue'
import Navbar from '@/components/Navbar.vue'
import { sendToNative_sendUartData } from '@/utils/base.js'
import { verifySum, numToHex, getNowTime, isNotEmptyObject } from '@/utils/utils.ts'

import { useStore } from 'vuex'
const store = useStore()

const navBg = ref('#fff')
const navTitle = ref('时钟设置')
const infoShow = ref(false)

const currentDate = ref(['2021', '01', '01'])
const minDate = ref(new Date(2020, 0, 1))
const maxDate = ref(new Date(2060, 11, 31))

const currentTime = ref(['12', '00'])
const currentWeek = ref([5])

const columns = ref(weekItems)
// 存储年月日周时分
const r_year = ref('')
const r_month = ref('')
const r_day = ref('')
const r_week = ref('')
const r_hour = ref('')
const r_minute = ref('')

const saveData = (params: any) => {
  console.log('params====', params)
  const { year, month, day, week, hour, minute } = params
  r_year.value = numToHex(year)
  r_month.value = numToHex(month)
  r_day.value = numToHex(day)
  r_week.value = numToHex(week)
  r_hour.value = numToHex(hour)
  r_minute.value = numToHex(minute)
}
// 初始化数据
const init = () => {
  console.log('init==')
  const info = store.state.deviceInfo
  console.log(info, 'info')
  console.log(isNotEmptyObject(info))
  if (!isNotEmptyObject(info)) {
    const { year, month, day, week, hour, minute } = info.clock
    currentDate.value = [`20${year}`, month, day]
    currentTime.value = [hour, minute]
    currentWeek.value = [week]
    saveData(info.clock)
  }
}
init()
watch(
  () => store.state,
  val => {
    console.log('store数据变化了==', val)
    const { deviceInfo } = val
    if (deviceInfo) {
      init()
    }
  },
  { deep: true }
)

const handleDateChange = ({ selectedValues }: any) => {
  console.log(selectedValues, 'selectedValues')
  r_year.value = numToHex(selectedValues[0].slice(-2))
  r_month.value = numToHex(selectedValues[1])
  r_day.value = numToHex(selectedValues[2])
  console.log(r_year.value, r_month.value, r_day.value, 'r_year')
}

const handleTimeChange = ({ selectedValues }: any) => {
  console.log(selectedValues, 'selectedValues')
  r_hour.value = numToHex(selectedValues[0])
  r_minute.value = numToHex(selectedValues[1])
  console.log(r_hour.value, r_minute.value, 'r_minute')
}

const onWeekChange = ({ selectedValues }: any) => {
  console.log(selectedValues)
  r_week.value = numToHex(selectedValues[0])
  console.log(r_week.value, 'r_week')
}

const handleNowTime = () => {
  const nowObj = getNowTime()
  const { year, month, day, hour, minute, week } = nowObj
  currentDate.value = [`${year}`, `${month}`, `${day}`]
  currentTime.value = [`${hour}`, `${minute}`]
  currentWeek.value = [week]
  const save = { ...nowObj, ...{ year: year.toString().slice(-2) } }
  saveData(save)
  infoShow.value = true
}

const onSendClick = () => {
  console.log('send')

  const data = `${r_year.value}${r_month.value}${r_day.value}${r_week.value}${r_hour.value}${r_minute.value}`
  const sum = verifySum(`02090019${data}`)
  const hex = `F1F102090019${data}${sum}7E`
  console.log(hex, 'hex')
  sendToNative_sendUartData(hex)
}
const emitConfirm = () => {
  infoShow.value = false
}
</script>
<style lang="less" scoped>
@import url(../assets/style/control.less);
</style>
